<template>
	<view class="ff-grid-item" :style="styles">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "ff-grid-item",
		components: {},
		props: {
			border: {
				type: String,
				default: 'var(--ff-border)'
			},
			bgColor: {
				type: String,
				default: 'transparent'
			},
		},
		data() {
			return {

			};
		},
		computed: {
			styles() {
				let styles = {
					'border-right': this.border,
					'border-bottom': this.border,
					'background-color': this.bgColor,
				}
				return styles
			},
		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style scoped>
	@import "../../librarys/css/components.css";

	.ff-grid-item {
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		aspect-ratio: 16 / 16;
		margin-right: -1px;
		margin-bottom: -1px;
		overflow: hidden;
		padding-left: 1px;
		padding-top: 1px;
	}
</style>